<template>
  <div>
    <view class="search-field">
      <input confirm-type="search" placeholder-class="placeholder-class" class="input-class" @confirm="handleSearch" placeholder="请输入成语, 默认：马到成功" />
    </view>
    <view class="collapse-class">
      <i-collapse  name="0">
        <i-collapse-item
          v-for="(item, index) in newsArr"
          :key="index"
          :name="index"
          :title="item.chengyu"
          i-class-title="title-class"
          i-class-content="content-class"
        >
          <view slot="content">
            <div class="content-item">出处：{{ item.chuchu }}</div>
            <div class="content-item">典故：{{ item.diangu }}</div>
            <div class="content-item">范例：{{ item.fanli }}</div>
            <div class="content-item">拼音：{{ item.pinyin }}</div>
          </view>
        </i-collapse-item>
      </i-collapse>
    </view>
    <i-spin size="large" fix v-if="spinShow"></i-spin>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        newsArr: [],
        spinShow: false,
        searchKey: '马到成功'
      }
    },
    methods: {
      handleSearch (e) {
        // confirm模拟确定/回车事件
        this.searchKey = e.target.value || '马到成功'
        this.getUniveralsList()
      },
      getUniveralsList () {
        this.spinShow = true
        wx.request({
          url: 'https://api.tianapi.com/txapi/chengyu/', // 这里必须在后面呢加上 '/',才可以访问到
          data: {
            key: 'c732ed00482b7208218faf599e32239a',
            num: 10,
            word: this.searchKey
          },
          header: {'content-type':'application/json'},
          method: 'GET',
          dataType: 'json',
          responseType: 'text',
          success: (result)=>{
            const { code, newslist = [] } = result.data
            if (code === 200) {
              this.newsArr = newslist
            }
          },
           complete: ()=>{
            this.spinShow = false
           }
        })
      },
    },
    onLoad () {
      this.getUniveralsList()
    }
  }
</script>

<style>
  .search-field {
    position: fixed;
    top: 0;
    width: calc(100% - 40rpx);
  }
  .input-class {
    border: 1px solid #eee;
    height: 40px;
    padding: 5px 10px;
    background-color: #fff;
  }
  .placeholder-class {
    font-size: 14px;
  }
  .collapse-class {
    margin-top: 50px;
  }
  .title-class {
    font-size: 14px;
    color: lightslategray;
  }
  .content-class {
    font-size: 16px;
  }
  .content-item {
    margin-bottom: 20rpx;
  }
</style>